<template>
  <div style="height: 835px; width: 100%" class="flex-row-center-center">
    <div class="flex-row-center-center" style="width: 41.08%">
      <div style="width: 100%">
        <div class="add-data-title flex-row-center-center">井组数据新增</div>
        <div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">库区编号</div>
            <Input
              class="add-data-unit-value"
              v-model="kqId"
              size="large"
              @on-blur="updateJzId"
            />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">井组编号</div>
            <Input class="add-data-unit-value" v-model="jzId" size="large" />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">井组名称</div>
            <Input class="add-data-unit-value" v-model="jzName" size="large" />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">井组状态</div>
            <Input class="add-data-unit-value" v-model="jzState" size="large" />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">井组面积</div>
            <Input class="add-data-unit-value" v-model="jzArea" size="large" />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">检测点数量</div>
            <Input class="add-data-unit-value" v-model="jcdNum" size="large" />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">井口坐标</div>
            <Input class="add-data-unit-value" v-model="jkPoint" size="large" />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">示踪剂一</div>
            <Input class="add-data-unit-value" v-model="szj1" size="large" />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">示踪剂二</div>
            <Input class="add-data-unit-value" v-model="szj2" size="large" />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">示踪剂三</div>
            <Input class="add-data-unit-value" v-model="szj3" size="large" />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title"></div>
            <Button class="add-data-button" @click="addData">新增</Button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      kqId: "",
      jzId: "",
      jzName: "",
      jcdNum: "",
      jzArea: "",
      jzState: "",
      jkPoint: "",
      szj1: "",
      szj2: "",
      szj3: "",
    };
  },
  props: {
    jzInfoList: Array,
  },
  computed: {
    systemTime() {
      return this.$store.state.systemTime;
    },
    curDate() {
      return this.$store.state.curDate;
    },
  },
  computed: {
    id() {
      if (this.jzInfoList.length > 0) {
        return this.jzInfoList.length + 1;
      } else {
        return 1;
      }
    },
  },
  methods: {
    addData() {
      let arr = [];
      let jkXpoint = "";
      let jkYpoint = "";
      if (this.jzId != "") {
        if (
          this.jkPoint != "" &&
          this.jkPoint.indexOf("(") > -1 &&
          this.jkPoint.indexOf(")") > -1
        ) {
          let start = this.jkPoint.indexOf("(");
          let end = this.jkPoint.indexOf(")");
          let item = this.jkPoint.substring(start + 1, end);
          arr = item.split(",");
          this.jkXpoint = arr[0];
          this.jkYpoint = arr[1];
        }
        let param = {};

        param.kqId = this.kqId;
        param.jzId = this.jzId;
        param.jzName = this.jzName;
        param.jzState = this.jzState;
        if (this.jzArea != "") {
          param.jzArea = this.jzArea;
        }

        param.updateTime = this.curDate;
        if (this.jcdNum != "") {
          param.jcdNum = this.jcdNum;
        }

        param.jkXpoint = this.jkXpoint;
        param.jkYpoint = this.jkYpoint;
        param.szj1 = this.szj1;
        param.szj2 = this.szj2;
        param.szj3 = this.szj3;
        this.$axios({
          url: "/addOneJzInfo",
          type: "post",
          params: param,
        })
          .then((res) => {
            alert("添加成功");
            this.kqId = "";
            this.jzId = "";
            this.jzName = "";
            this.jzState = "";
            this.jzArea = "";
            this.curDate = "";
            this.jcdNum = "";
            this.jkPoint = "";
            this.szj1 = "";
            this.szj2 = "";
            this.szj3 = "";
            this.id++;
          })
          .catch((error) => {});
      } else {
        alert("井组编号不能为空");
      }
    },
    updateJzId() {
      let ids = 1;
      this.$axios({
        url: "/getSpecJzNo",
        type: "post",
        params: { kqId: this.kqId },
      })
        .then((res) => {
          console.log(res);
          ids = res.data + 1;
          if (ids < 10) {
            ids = "0" + ids;
          }
          this.jzId = this.kqId + ids;
        })
        .catch((error) => {});
    },
  },
};
</script>
<style scoped>
.test-style {
  color: black;
  font-size: 18px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
  width: calc(15.6% - 20px);
  margin-left: 10px;
  margin-right: 10px;
}
.add-data-title {
  height: 92px;
  background-color: rgba(204, 0, 0, 0.12);
  color: black;
  font-size: 36px;
  text-align: center;
  font-family: Roboto;
}
.add-data-unit-title {
  width: 30%;
  color: black;
  font-size: 20px;
  text-align: center;
  font-family: Roboto;
}
.add-data-unit-value {
  width: 70%;
  height: 34px;
}
.add-data-button {
  width: 170px;
  height: 47px;
  border-radius: 4px;
  background-color: #f1f1f1;
  color: black;
  font-size: 20px;
  text-align: center;
  font-family: Microsoft Yahei;
  border: 1px solid rgba(187, 187, 187, 1);
}
</style>